<template>
  <div class="container">
    <div class="top">
      <Banner2>
        <template #left>
          <h1>Contact Us</h1>
        </template>
        <template #right>
          <h2>Home > Contact Us</h2>
        </template>
      </Banner2>
    </div>
    <div class="content">
      <div class="left">
        <div class="center">
          <div class="title">Get in Touch</div>
          <div class="detail">
            <p>
              We are looking forward to working with you. We offer high quality
              PPE at a competitive price. If you have any inquiry, please
              contact us via phone or email as listed below.
            </p>
          </div>
          <div class="infor">
            <div class="inforitem item1">
              <div class="icon">
                <img src="../../assets/images/global.png" alt="" />
              </div>
              <div class="text">
                Office address: No. 10 Hanghai Road, Guancheng district
                Zhengzhou 450000, China
              </div>
            </div>
            <div class="inforitem item2">
              <div class="icon">
                <img src="../../assets/images/global.png" alt="" />
              </div>
              <div class="text">
                Factory address: No.26 Wangjiang Road, Gaoqiao Town, Yinzhou
                District, Ningbo 315100, China
              </div>
            </div>
            <div class="inforitem item3">
              <div class="icon">
                <img src="../../assets/images/global.png" alt="" />
              </div>
              <div class="text">Mr. Arlen wang</div>
            </div>
            <div class="inforitem item4">
              <div class="icon">
                <img src="../../assets/images/global.png" alt="" />
              </div>
              <div class="text">0086-18638608485 (Whatsapp)</div>
            </div>
            <div class="inforitem item5">
              <div class="icon">
                <img src="../../assets/images/global.png" alt="" />
              </div>
              <div class="text">sales@anbusafety.com</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="center">
            <Form/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Form from "@/pages/contact/form.vue";
</script>

<style scoped lang="scss">
.container {
  .top {
    h1 {
      color: white;
      font-family: "Roboto Condensed", Sans-serif;
      font-size: 28px;
      font-weight: 500;
    }
    h2 {
      color: rgb(244, 235, 235);
      font-family: "Roboto Condensed", Sans-serif;
      font-size: 16px;
    }
  }
  .content {
    width: 100%;
    background: white;
    min-height: 657.773px;
    display: flex;
    justify-content: center;
    align-items: center;
    .left {
      width: 500px;
      min-height: 657px;
      .center {
        width: 500px; /* 修正拼写错误：widows → width */
        min-height: 547px;
        padding: 20px 5px 20px 50px;
        margin: 0 10px 70px 10px;
        .title {
          margin-bottom: 20px;
          font-size: 35px;
        }
        .detail {
          margin-bottom: 20px;
          p {
            font-size: 18px;
            line-height: 1.5;
            margin-bottom: 20px;
          }
        }
        .infor {
          width: 100%;
          min-height: 220px;
          .inforitem {
            display: flex;
            align-items: center; /* 让图标和文字垂直居中对齐 */
            width: 100%;
            margin-bottom: 15px; /* 增加间距，避免内容拥挤 */
            font-size: 16px; /* 适当缩小字体，避免换行 */
            .icon {
              width: 30px; /* 调整容器大小（包含边框和内边距） */
              height: 30px;
              border: 2.667px solid #118ce4;
              padding: 5px;
              /* 核心：让图片在容器内居中 */
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 15px; /* 与文字保持间距 */
              img {
                width: 100%; /* 图片适应容器大小 */
                height: 100%;
                object-fit: contain; /* 保持图片比例，避免拉伸 */
              }
            }
            .text {
              flex: 1; /* 文字区域占剩余空间，避免溢出 */
              line-height: 1.5; /* 优化行高，多行文字更美观 */
            }
          }
        }
      }
    }
    .right {
      width: 575px;
      min-height: 657px;
    }
  }
}
</style>